<template>
  <div class="page">
    <!-- 贪吃蛇游戏示例 -->
    <div class="main">
      <!-- 游戏可控制区域 -->
      <div class="stage">
        <!-- 游戏提示 -->
        <div class="tip">请按方向键为蛇指定前进的方向</div>
        <!-- 蛇 -->
        <div id="snake" class="snake">
          <!-- 蛇身 -->
          <div></div>
        </div>
        <!-- 食物 -->
        <div ref="food" class="food">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
        <div class="gametext">贪吃蛇</div>
      </div>
      <div ref="footerRef" class="footer">
        <div>当前得分:<span class="score">0</span></div>
        <div>难度等级:<span class="level">1</span></div>
      </div>
    </div>
    <div class="mask">
      <div class="mask-box">
        <div class="title">贪吃蛇</div>
        <div class="numbers" v-show="isShowScore">
          <div class="item">
            <span id="newScore" class="maskscore">0</span>
            <span>最终得分</span>
          </div>
          <div class="item">
            <span id="newLevel" class="maskscore">1</span>
            <span>最终等级</span>
          </div>
        </div>
        <div class="numbers old">
          <div class="item">
            <span id="oldScore" class="maskscore">0</span>
            <span>历史最佳得分</span>
          </div>
          <div class="item">
            <span id="oldLevel" class="maskscore">1</span>
            <span>历史最高等级</span>
          </div>
        </div>
        <div class="startbtn" @click="gameStart">开始游戏</div>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import Control from './moduls'    // 导入统一整合后的游戏相关类
import {ref,onMounted} from 'vue'
const isShowScore = ref(false)    // 首次进入不显示得分
let game:Control
onMounted(() => {
  game = new Control()
  game.ScorePanel.checkHistory()    // 尝试为历史记录赋值

})
// 开始按钮的点击事件
const gameStart = () => {
  game.start()
  isShowScore.value = true    // 游戏开始后就有得分可以显示了
}


</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.page {
  width: 100%;
  min-height: 100vh;
  font: bold 16px "Courier";
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

:root {
  --bg-main: #B7D4A9;
}

.main {
  width: 360px;
  height: 420px;
  background-color: var(--bg-main);
  border: 10px solid #4b98d2;
  border-radius: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  position: relative;
}


.stage {
  width: 304px;
  height: 304px;
  border: 2px solid #f501ac;
  overflow: hidden;
  position: relative;
  /*游戏区域开启相对定位*/
}
.tip {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 20%;
  color: #ff2f00;
  font-size: 16px;
  animation: tipAnimate 3s linear infinite;
  cursor: default;
}
@keyframes tipAnimate {
  0% {
    opacity: 0.9;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 0.9;
  }
}

.snake>div {
  width: 10px;
  height: 10px;
  background-color: rgb(252, 117, 7);
  border: 1px solid var(--bg-main);
  /* 给蛇开启绝对定位 */
  position: absolute;
}

.snake>div:nth-child(1) {
  background-color: rgb(253, 5, 5);
}

/* 食物 */
.food {
  width: 10px;
  height: 10px;
  /* border: 1px solid var(--bg-main); */
  /* 给蛇开启绝对定位 */
  position: absolute;
  top: 100px;
  left: 100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.food div {
  width: 4px;
  height: 4px;
  background-color: rgb(233, 3, 254);
  transform: rotate(45deg);
}

.gametext {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 65px;
  color: #fd4305;
  opacity: 0.1;
  letter-spacing: 15px;
  cursor: default;
}

.footer {
  width: 300px;
  display: flex;
  justify-content: space-between;
  font-size: 14px!important;
  cursor: default;

}
.footer .score,
.footer .level {
  font-size: 26px;
}

.mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 11;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
}

.startbtn {
  width: 250px;
  padding: 10px 0px;
  text-align: center;
  border-radius: 8px;
  background-color: rgb(84, 195, 238);
  color: white;
  letter-spacing: 3px;
  cursor: pointer;
}

.startbtn:active,
.startbtn:hover {
  background-color: rgb(42, 180, 235);
}

.mask-box {
  width: 360px;
  height: 420px;
  border-radius: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  background-color: var(--bg-main);
  padding: 30px 0;
}

.title {
  font-size: 40px;
  letter-spacing: 4px;
  color: #fd4305;
  cursor: default;
}

.numbers {
  width: 280px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: default;
}
.old {
  opacity: 0.7;
}
.item {
  width: 50%;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  cursor: default;
}
.maskscore {
  font-size: 30px;
  color: rgb(253, 5, 5);
  cursor: default;
}
</style>